﻿body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0; /* 移除默认边距 */
    padding: 20px; /* 增加内边距 */
    
}

.outer-container {
    font-family: 'Fredoka One', cursive;
    background-color: powderblue; /* 共同的背景色 */
    padding: 20px; /* 内边距 */
    border-radius: 15px; /* 圆角 */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    max-width: 700px; /* 设置最大宽度 */
    margin: auto; /* 居中对齐 */
    background-image: url('/11.png');
}

.container {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 使内容分布在两端 */
    align-items: center; /* 垂直居中对齐 */
    padding: 20px; /* 内边距 */
}

#clock {
    width: 200px;
    height: 200px;
    margin-left: 30px; /* 减少与输出区域的间距 */
    border: 10px solid #808080;
    border-radius: 50%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
}

.hand {
    position: absolute;
    background-color: black;
    transform-origin: bottom;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.hour {
    width: 6px;
    height: 50px;
    background-color: #000;
    z-index: 3;
}

.minute {
    width: 4px;
    height: 70px;
    background-color: gray;
    z-index: 2;
}

.second {
    width: 2px;
    height: 90px;
    background-color: red;
    z-index: 1;
}

.tick {
    position: absolute;
    background: black;
    width: 2px;
}

.number {
    position: absolute;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

    #outD {
    padding: 55px;
    border: none;
    background-color: transparent; /* 使背景透明，以便显示外部背景 */
}

#Text1 {
    font-size: 50px;
    padding: 25px;
    border: none;
    border-radius: 10px;
    width: 200px;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.5);
}

#Btn {
    padding: 10px 15px; /* 增加内边距 */
    font-size: 25px; /* 增加字体大小 */
    margin: 17px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: rgba(0, 0, 0, 0.3);
}

    #Btn:hover {
        background-color: rgba(0, 0, 0, 0.1); /* 鼠标悬停时改变按钮颜色 */
    }

span {
    font-size: 20px;
    text-align: center;
    color: #454444f2;
}

#Text2 {
    font-size: 20px;
    text-align: center;
    color: #454444f2;
}